<template>
  <div class="alert-center">
    <el-card class="alert-summary-card">
      <template #header>
        <div class="card-header">
          <el-icon><Warning /></el-icon>
          <span>智能预警中心</span>
        </div>
      </template>
      <div class="summary-row">
        <div class="summary-item">
          <div class="summary-title">今日异常</div>
          <div class="summary-value status-error">{{ todayCount }}</div>
        </div>
        <div class="summary-item">
          <div class="summary-title">高风险</div>
          <div class="summary-value status-error">{{ highRiskCount }}</div>
        </div>
        <div class="summary-item">
          <div class="summary-title">处理中</div>
          <div class="summary-value status-warning">{{ handlingCount }}</div>
        </div>
        <div class="summary-item">
          <div class="summary-title">已处理</div>
          <div class="summary-value status-success">{{ resolvedCount }}</div>
        </div>
      </div>
    </el-card>

    <el-card class="alert-list-card">
      <template #header>
        <div class="card-header">
          <el-icon><BellFilled /></el-icon>
          <span>异常列表</span>
        </div>
      </template>
      <el-table :data="alerts" style="width: 100%" v-loading="loading">
        <el-table-column prop="time" label="时间" width="160" />
        <el-table-column prop="type" label="类型" width="100">
          <template #default="{ row }">
            <el-tag :type="getTypeTag(row.type)">{{ row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="异常描述" />
        <el-table-column prop="risk" label="风险等级" width="100">
          <template #default="{ row }">
            <el-tag :type="getRiskTag(row.risk)">{{ row.risk }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="aiReason" label="AI分析" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === '处理中' ? 'warning' : (row.status === '已处理' ? 'success' : 'danger')">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <el-button size="small" type="primary" @click="handleAlert(row)" v-if="row.status === '待处理'">一键处理</el-button>
            <el-button size="small" @click="viewHistory(row)">历史追溯</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 历史追溯弹窗 -->
    <el-dialog v-model="historyDialogVisible" title="异常历史追溯" width="500px">
      <el-timeline>
        <el-timeline-item
          v-for="(item, idx) in historyList"
          :key="idx"
          :timestamp="item.time"
          :type="item.level"
        >
          {{ item.desc }}
        </el-timeline-item>
      </el-timeline>
      <template #footer>
        <el-button type="primary" @click="historyDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AlertCenter',
  data() {
    return {
      loading: false,
      alerts: [
        {
          id: 1,
          time: '2024-06-01 09:12',
          type: '环境',
          desc: 'A区土壤湿度低于阈值',
          risk: '高',
          aiReason: '连续干旱天气，蒸发量大',
          status: '待处理',
          history: [
            { time: '2024-05-31 18:00', desc: '湿度下降趋势明显', level: 'warning' },
            { time: '2024-06-01 09:12', desc: '触发异常', level: 'danger' }
          ]
        },
        {
          id: 2,
          time: '2024-06-01 10:30',
          type: '设备',
          desc: 'B区灌溉泵异常断电',
          risk: '中',
          aiReason: '设备老化，维护周期超期',
          status: '处理中',
          history: [
            { time: '2024-06-01 10:30', desc: '设备断电', level: 'danger' }
          ]
        },
        {
          id: 3,
          time: '2024-06-01 11:00',
          type: '作物',
          desc: 'C区玉米叶片出现病斑',
          risk: '高',
          aiReason: 'AI识别疑似叶斑病，需复查',
          status: '待处理',
          history: [
            { time: '2024-06-01 11:00', desc: 'AI识别异常', level: 'danger' }
          ]
        },
        {
          id: 4,
          time: '2024-06-01 08:20',
          type: '气象',
          desc: '未来2小时有强降雨预警',
          risk: '中',
          aiReason: '气象AI预测降雨概率90%',
          status: '已处理',
          history: [
            { time: '2024-06-01 08:20', desc: 'AI气象预警', level: 'warning' },
            { time: '2024-06-01 08:40', desc: '已通知相关人员', level: 'info' }
          ]
        }
      ],
      historyDialogVisible: false,
      historyList: []
    }
  },
  computed: {
    todayCount() {
      return this.alerts.length
    },
    highRiskCount() {
      return this.alerts.filter(a => a.risk === '高').length
    },
    handlingCount() {
      return this.alerts.filter(a => a.status === '处理中').length
    },
    resolvedCount() {
      return this.alerts.filter(a => a.status === '已处理').length
    }
  },
  methods: {
    getTypeTag(type) {
      if (type === '环境') return 'info'
      if (type === '设备') return 'warning'
      if (type === '作物') return 'success'
      if (type === '气象') return 'primary'
      return 'info'
    },
    getRiskTag(risk) {
      if (risk === '高') return 'danger'
      if (risk === '中') return 'warning'
      if (risk === '低') return 'success'
      return 'info'
    },
    handleAlert(row) {
      row.status = '处理中'
      this.$message.success('已派发处理任务')
    },
    viewHistory(row) {
      this.historyList = row.history
      this.historyDialogVisible = true
    }
  }
}
</script>

<style scoped>
.alert-center {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}
.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.alert-summary-card {
  margin-bottom: 0;
}
.summary-row {
  display: flex;
  gap: 32px;
  justify-content: space-between;
  padding: 16px 0;
}
.summary-item {
  flex: 1;
  text-align: center;
}
.summary-title {
  color: #909399;
  font-size: 14px;
  margin-bottom: 8px;
}
.summary-value {
  font-size: 24px;
  font-weight: bold;
}
.status-error {
  color: #F56C6C;
}
.status-warning {
  color: #E6A23C;
}
.status-success {
  color: #67C23A;
}
.alert-list-card {
  flex: 1;
}
</style> 